import React,{
  Suspense
} from 'react'
import {
  BrowserRouter,
  Route,
  Routes,
  Navigate
} from 'react-router-dom'

import routes from './router_config'

function Index() {

  const renderRouter = (arr) => {
    return arr.map((item,index) => {
        return  item.path ? <Route key={index} path={item.path} element={<item.element></item.element>}>
              {
                item.children &&  renderRouter(item.children)
              }
        </Route>
        : <Route key={index} path={item.from} element={<Navigate to={item.to}></Navigate>}></Route>
    })
  }
  return (
    <div className='app'>
        <Suspense fallback={<div>load...</div>}>
            <BrowserRouter>
              <Routes>
                {
                  renderRouter(routes)
                }
              </Routes>
            </BrowserRouter>
        </Suspense>
    </div>
  )
}

export default Index